<template>
	<view class='tool' :style="{ 'padding-top':pageTitle+'px' }">
		<view class='pageHead' :style="{ 'height':pageTitle+'px', }">
			<view class='statusBar' :style='{"height":statusBar+"px" }'></view>
			<view class='head dFlex jCenter_aCenter'>
				<view :class='["headMenu",currentMenu == "narrate" ? "active" : ""]' @click='changeMenu("narrate")'>{{$t('tool.menu1')}}</view>
				<view :class='["headMenu",currentMenu == "number" ? "active" : ""]' @click='changeMenu("number")'>{{$t('tool.menu2')}}</view>
				<view :class='["headMenu",currentMenu == "hot" ? "active" : ""]' @click='changeMenu("hot")'>{{$t('tool.menu3')}}</view>
			</view>
		</view>
		<view class='content' v-if='currentMenu == "narrate"'>
			<u-search :placeholder="$t('tool.placeholder1')" :showAction="true" actionText="搜索" :animation="true" :actionStyle='{
				"color":"#9102A2"
			}'></u-search>
			<view class='btns dFlex jAround_aCenter'>
				<view class='btnOne search' @click='goSearch'>{{$t('tool.placeholder1')}}</view>
				<view class='btnOne'>{{$t('tool.addBtn')}}</view>
			</view>
			<view class='part one'>
				<view class='part_title'>{{$t('tool.manji_title1')}}</view>
				<view class='part_content'>
					<view class='price_list dFlex jBetween_aCenter fWap' >
						<view class='list_item dFlex flexDirection jCenter_aCenter' v-for="(item,index) in 9" :key='index'>
							<view class='item_img imgPublic'>
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<text>150</text>
						</view>
					</view>
					<view class='price_info dFlex jBetween_aCenter'>
						<view class='info_item'>
							<view class='show_pos red'>{{$t('tool.manji_price1')}}</view>
							<text style="font-weight: 600;">24</text>
						</view>
						<view class='info_item'>
							<view class='show_pos red'>{{$t('tool.manji_price2')}}</view>
							<text>24</text>
						</view>
						<view class='info_item'>
							<view class='show_pos red'>{{$t('tool.manji_price3')}}</view>
							<text>24</text>
						</view>
						<view class='info_item'>
							<view class='show_pos'>{{$t('tool.manji_price4')}}</view>
							<text>24</text>
						</view>
						<view class='info_item'>
							<view class='show_pos'>{{$t('tool.manji_price5')}}</view>
							<text>24</text>
						</view>
					</view>
				</view>
			</view>
			<view class='part two'>
				<view class='part_title'>{{$t('tool.manji_title2')}}</view>
				<view class='part_content'>
					<view class="explain">
						<view class='explain_row dFlex jStart_aCenter' v-for="(item,index) in 3" :key='index'>
							<view class="row_logo imgPublic">
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<view class="row_info">
								<view class='dFlex jBetween_aCenter'>
									<view class="info_name">文字标题文字标题</view>
									<view class="info_count">8767</view>
								</view>
								<view class="info_desc">文字说明文字说明文字说明文字说明</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class='part three'>
				<view class='part_title'>{{$t('tool.manji_title3')}}</view>
				<view class='part_content'>
					<view class="tabTit dFlex jBetween_aCenter">
						<view class="logo"></view>
						<view class="d4">4D</view>
						<view class="price">{{$t('tool.manji_tabItem1')}}</view>
						<view class="date">{{$t('tool.manji_tabItem2')}}</view>
						<view class="distance">{{$t('tool.manji_tabItem3')}}</view>
					</view>
					<view class="tabConent">
						<view class="tabRow dFlex jBetween_aCenter" v-for="(item,index) in 3" :key='index'>
							<view class="logo imgPublic">
								<image src="/static/logo.png" mode="widthFix"></image>
							</view>
							<view class="d4">7786</view>
							<!-- red -->
							<view class="price">
								<text>安</text>
								<!-- <text>特</text>
								<text>头奖</text> -->
							</view>
							<view class="date">11/01/25</view>
							<view class="distance">日距</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class='content' v-if='currentMenu == "number"'>
			<view class='part' v-for="(item,index) in 3" :key='index'>
				<view class='part_title'>Magnum</view>
				<view class='part_content'>
					<view class="tabConent">
						<view class="tabRow dFlex jBetween_aCenter" v-for="(item,index) in 3" :key='index'>
							<view class="tabCell">1234</view>
							<view class="tabCell">5145</view>
							<view class="tabCell">3122</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-if='currentMenu == "hot"'>
			<view class="tools">
				<view class="price_show dFlex jBetween_aCenter">
					<u-icon @click='showKind = true' size='14px' name="arrow-down-fill" label='4D 万能' labelPos='left'></u-icon>
					<u-picker :show="showKind" @cancel='showKind = false' :columns="columns" keyName="label"></u-picker>
					<view class='dFlex jEnd_aCenter'>
						<text style="display: inline-block;margin-right: 8px;">{{$t('tool.onlyShow')}}</text>
						<u-switch activeColor='#9102A2' size='20'></u-switch>
					</view>
				</view>
				<view class='year dFlex jStart_aCenter'>
					<u-icon @click='year = true' size='14px' name="arrow-down-fill" label='2024' labelPos='left'></u-icon>
					<u-picker :show="year" :columns="yearList"></u-picker>
				</view>
			</view>
			<view class='part'>
				<view class='part_title'>{{$t('tool.num_title1')}}</view>
				<view class='part_content'>
					<view class="tabTit dFlex jBetween_aCenter">
						<view class="tabCell">NO.</view>
						<view class="tabCell">{{$t('tool.manji_tabItem1')}}</view>
						<view class="tabCell">{{$t('tool.manji_tabItem2')}}</view>
					</view>
					<view class="tabConent">
						<view class="tabRow dFlex jBetween_aCenter" v-for="(item,index) in 3" :key='index'>
							<view class="tabCell">{{index + 1}}</view>
							<view class="tabCell">5145</view>
							<view class="tabCell">3</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="seat"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar:getApp().globalData.statusBar,
				pageTitle:getApp().globalData.pageTitle,
				currentMenu:'narrate',		//narrate解说  number号码  hot热门
				columns:[
					{label: '雪月夜',id: 2021},
					{label: '雪月夜',id: 2022},
					{label: '雪月夜',id: 2023},
				],
				yearList:['2025','2024','2023','2022','2021','2020'],
				showKind:false,
				year:false,
			};
		},
		methods:{
			// 切换菜单
			changeMenu(menu){
				this.currentMenu = menu;
			},
			// 高级搜索
			goSearch(){
				uni.navigateTo({
					url:'./search'
				})
			}
		}
	}
</script>

<style lang="scss">
	.content{
		// 热门万字号码
		.year{
			margin:12px 0;
		}
		// 万字解说
		.part{
			.part_content{
				.tabRow{
					.tabCell{
						width:calc(100% / 3);
						text-align: center;
					}
					.distance{
						width:50px;
						text-align: right;
					}
					.date{
						width:80px;
						text-align: center;
					}
					.price{
						width:35px;
						text-align: center;
						color: white;
						border-radius: 5px;
						font-size:12px;
						font-weight: 600;
						background: #5080EE;
						padding:3px 0;
					}
					.red{
						background: #FF281E;
					}
					.logo{
						width:24px;
						height: 24px;
						border-radius: 50%;
						background: red;
					}
					.d4{
						width:55px;
						text-align: center;
					}
					padding:8px 12px;
				}
				.tabTit{
					.tabCell{
						width:calc(100% / 3);
						text-align: center;
					}
					.distance{
						width:50px;
						text-align: right;
					}
					.date{
						width:80px;
						text-align: center;
					}
					.price{
						width:35px;
						text-align: center;
					}
					.logo{
						width:24px;
					}
					.d4{
						width:55px;
						text-align: center;
					}
					background: #343A40;
					color: white;
					padding:12px;
				}
				.explain{
					.explain_row{
						.row_info{
							.info_name{
								flex:1;
							}
							.info_count{
								width:max-content;
								margin-left: 10px;
								font-size: 12px;
								color: #999999;
							}
							.info_desc{
								color: #999999;
								font-size: 12px;
								margin-top:2px;
							}
							width:calc(100% - 46px);
						}
						.row_logo{
							width: 32px;
							height: 32px;
							border-radius: 50%;
							margin-right: 14px;
						}
						width: 100%;
						padding:12px 0;
						border-bottom:0.5px solid #dddddd;
					}
					.explain_row:last-child{
						border:none;
					}
					padding:0 8px;
					border: 0.5px solid #dddddd;
					border-radius: 0px 0px 16px 16px;
					box-sizing: border-box;
				}
				.price_info{
					.info_item{
						.show_pos{
							width:100%;
							border-radius: 6px;
							font-size:12px;
							color: white;
							background: #5080EE;
							padding: 3px 0;
							margin-bottom:6px;
						}
						.red{
							background: #FF281E;
						}
						width:calc((100% - 28.5px * 4) / 5);
						text-align: center;
					}
				}
				.price_list{
					.list_item{
						text{
							display: inline-block;
							text-align: center;
							font-size:13px;
							width:50px;
						}
						.item_img{
							border-radius: 50%;
							width:50px;
							height:50px;
							margin-bottom: 5px;
						}
						width:33%;
						margin-bottom: 12px;
					}
					width:100%;
					padding:12px 12px 0;
					box-sizing: border-box;
				}
				width:100%;
			}
			.part_title{
				width:100%;
				text-align: center;
				color: white;
				border-top-left-radius: 15px;
				border-top-right-radius: 15px;
				padding:14px 0;
				font-size:16px;
				background: linear-gradient(to bottom,#9102A2,#2d0bad);
			}
			width:100%;
			margin-top: 12px;
		}
		.btns{
			.btnOne{
				width:calc((100% - 12px) / 2);
				text-align:center;
				color:white;
				background: #2d0bad;
				border-radius: 50px;
				padding:10px 0;
			}
			.search{
				background: #9102A2;
			}
			width:100%;
			margin:12px 0 0;
		}
		width:100%;
		padding:12px;
		box-sizing: border-box;
	}
	.headMenu{
		width:max-content;
		padding:5px;
		color:#909399;
	}
	.headMenu:nth-child(2){
		margin:0 10px;
	}
	.active{
		color:#9102A2;
		font-weight:600;
	}
	page{
		background: white;
	}
</style>
	